<template>
  <div class="dd">
    <div class="btnList">
      <el-button @click="addUser">新增用户 <i class="el-icon-plus"></i></el-button>
      <el-button>删除用户 <i class="el-icon-delete"></i></el-button>
      <el-button>导出 <iconpark-icon name="daochu"></iconpark-icon></el-button>
      <div class="searchDiv">
        <el-input v-model="pageInfo.search" placeholder="请输入内容"></el-input>
        <el-button @click="search" :disabled="pageInfo.search">查询</el-button>
      </div>
    </div>
    <div v-if="userList.data">
      <el-table
        ref="multipleTable"
        :data="userList.data.records"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="uName" label="用户名称" width="120">
        </el-table-column>
        <el-table-column prop="uAccountName" label="真实姓名" width="120">
        </el-table-column>
        <el-table-column prop="uTelephone" label="电话" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="性别" show-overflow-tooltip>
          <template slot-scope="scope">{{
            scope.row.uSex == 0 ? "男" : "女"
          }}</template>
        </el-table-column>
        <el-table-column
          prop="uAccountflag"
          label="账号状态"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="country" label="国籍" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="updatedBy" label="角色" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="unit" label="单位" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="createdTime"
          label="创建时间"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column label="操作" show-overflow-tooltip>
          <el-dropdown size="mini" split-button slot-scope="scope">
            重置密码
            <el-dropdown-menu slot="dropdown" class="caozuoList">
              <el-dropdown-item command="删除账号">
                <el-popconfirm
                  confirm-button-text="好的"
                  cancel-button-text="取消"
                  icon="el-icon-info"
                  icon-color="red"
                  title="确定删除吗？"
                  @confirm="delAccount(scope.row)"
                >
                  <el-button
                    slot="reference"
                    style="border: none; width: 80px"
                    size="mini"
                  >
                    删除
                  </el-button></el-popconfirm
                >
              </el-dropdown-item>
              <el-dropdown-item command="冻结账号"
                ><el-button
                  style="border: none; width: 80px"
                  size="mini"
                  @click="freezeAccount(scope.row)"
                >
                  冻结账号
                </el-button></el-dropdown-item
              >
              <el-dropdown-item command="锁定账号"
                ><el-button
                  style="border: none; width: 80px"
                  size="mini"
                  @click="lockAccount(scope.row)"
                >
                  锁定账号
                </el-button></el-dropdown-item
              >
              <el-dropdown-item command="重置密码"
                ><el-button
                  style="border: none; width: 80px"
                  size="mini"
                  @click="resetPassword(scope.row)"
                >
                  重置密码
                </el-button></el-dropdown-item
              >
              <el-dropdown-item command="编辑账号"
                ><el-button
                  style="border: none; width: 80px"
                  size="mini"
                  @click="editAccount(scope.row)"
                >
                  修改用户
                </el-button></el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </el-table-column>
      </el-table>
      <MyPagenation
        :currentChange="handleCurrentChange"
        :sizeChange="handleSizeChange"
        :currentPageSync="pageInfo.page"
        :pageSize="pageInfo.size"
        :total="userList.data.total"
      ></MyPagenation>
    </div>
    <!-- 新增弹窗 -->
    <el-dialog
      :title="userId ? '修改用户' : '新增用户'"
      :visible.sync="addDialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        ref="form"
        :rules="rules"
        :model="form"
        label-width="80px"
        label-position="top"
      >
        <el-form-item label="真实姓名" prop="uName">
          <el-input v-model="form.uName"></el-input>
        </el-form-item>
        <el-form-item label="账户名称" prop="uAccountName">
          <el-input v-model="form.uAccountName"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="form.uSex" placeholder="请选择性别">
            <el-option label="男" value="0"></el-option>
            <el-option label="女" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出身日期">
          <el-date-picker
            v-model="form.uBirthday"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="电话" prop="uTelephone">
          <el-input v-model="form.uTelephone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.uEmail"></el-input>
        </el-form-item>
        <el-form-item label="住址">
          <el-input v-model="form.uAddress"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="subUserInfo('form')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import {
  searchUser,
  insertUser,
  updateUserInfo,
  deleteUserInfo,
  resetPassWord,
} from "@/api/userManage/api";
import { msToDate } from "@/utils/getTimes";
export default {
  name: "UserList",
  data() {
    return {
      userId: "",
      form: {
        uName: "",
        uAccountName: "",
        uSex: "",
        uBirthday: "",
        uTelephone: "",
        uEmail: "",
        uAddress: "",
      },
      rules: {
        uName: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 2, max: 12, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        uAccountName: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        uTelephone: [
          {
            required: true,
            message: "请填写电话",
            trigger: "change",
          },
        ],
      },
      addDialogVisible: false,
      pageInfo: {
        page: 1,
        size: 10,
        search: "",
      },
      tableData: [],
      multipleSelection: [],
      value: "",
    };
  },
  methods: {
    ...mapActions("userList", ["actionGetUserList","actionsearchUserList"]),
    // 修改用户信息
    editAccount(row) {
      console.log(row);
      this.form = row;
      this.userId = row.id;
      this.addDialogVisible = true;
    },
    // 查询
    async search(){
      this.actionsearchUserList(this.pageInfo)
    },
    // 删除用户信息
    async delAccount(row) {
      const res = await deleteUserInfo(row.id);
      if (res.code == 200) {
        this.$message.success("删除成功");
        this.actionGetUserList(this.pageInfo);
      }
    },
    resetPassword(row) {
      resetPassWord(row.id);
    },
    // 重置Form表单
    resteForm() {
      this.userId = ''
      this.form = {
        uName: "",
        uAccountName: "",
        uSex: "",
        uBirthday: "",
        uTelephone: "",
        uEmail: "",
        uAddress: "",
      };
    },
    addUser() {
      this.resteForm();
      this.addDialogVisible = true;
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 提交表单
    subUserInfo(form) {
      this.$refs[form].validate(async (valid) => {
        console.log(valid);
        if (valid) {
          this.form.uBirthday = msToDate(this.form.uBirthday).hasTime;
          if (this.userId) {
            // 修改
            this.form.id = this.userId;
            const res = await updateUserInfo(this.form);
            console.log('xiugai',res)
            if (res.code == 200) {
              this.$message.success("修改成功");
              this.actionGetUserList(this.pageInfo);
            } else {
              this.$message.error("修改失败");
            }
          } else {
            // 新增
            const res = await insertUser(JSON.stringify(this.form));
            console.log('xinzeng',res)
            if (res.code==200) {
              this.$message.success("新增成功");
              this.actionGetUserList(this.pageInfo);
            } else {
              this.$message.error("新增失败");
            }
          }
          alert("submit!");
          this.addDialogVisible = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleClose() {
      this.addDialogVisible = false;
      this.userId = "";
      // alert('关闭')
    },
    // 页面页码变化
    handleCurrentChange(val) {
      console.log(val);
      this.pageInfo.page = val;
      this.actionGetUserList(this.pageInfo);
    },
    // 页面大小变化
    handleSizeChange(val) {
      this.pageInfo.size = val;
      this.actionGetUserList(this.pageInfo);
    },
  },
  mounted() {
    this.actionGetUserList(this.pageInfo);
  },
  computed: {
    ...mapState("userList", ["userList"]),
  },
};
</script>

<style scoped lang="less">
@import "../../../assets/style/table.less";
::v-deep .el-dialog {
  width: 50% !important;
  margin-top: 10vh !important;
  .el-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100%;
    .el-form-item {
      width: 45%;
      .el-select {
        width: 100%;
        height: 40px;
      }
      .el-input__inner {
        width: 100%;
        height: 40px;
      }
      .el-date-editor.el-input,
      .el-date-editor.el-input__inner {
        width: 100%;
      }
    }
  }
  .el-dialog__footer {
    text-align: center;
    .el-button {
      width: 160px;
      height: 50px;
      background-color: #00e7e7;
    }
  }
}
iconpark-icon{
  vertical-align: middle;
}
</style>

